<template>
  <view class="dynamicBox">
    <!-- 排序 -->
    <view class="sort">
      <sort @rule="sortRule" :title="'排序'" :rule-list="ruleList"></sort>
    </view>

    <!-- 趣事列表 -->
    <view v-for="(item, index) in popularContent" :key="item.dId">
      <anecdotes @feedback="feedback" :data="item"></anecdotes>
    </view>

    <navigator
      url="../../subpkg/published/published"
      open-type="navigate"
      class="pulbish"
    >
      <uni-icons type="compose" size="26"></uni-icons>
    </navigator>

    <!-- 反馈建议窗口 -->
    <suggest_feedback @shut-down="shutDown" v-if="suggest"></suggest_feedback>

    <load :status="loadStatus"></load>
  </view>
</template>

<script lang="ts" setup>
import anecdotes from '@/components/anecdotes/anecdotes.vue'
import sort from '@/components/sort/sort.vue'
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'
import suggest_feedback from '@/components/suggest_feedback/suggest_feedback.vue'
import { reqPopularContent } from '@/api/dynamic'
import type { ResultPopularContent } from '@/config/data/result'
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue'
import { DYNAMIC_DETAIL } from '@/config/constant/index'
import type { DynaimcPage, DynamicSortRule } from '@/config/data/data'
import load from '@/components/load/load.vue'
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onShareAppMessage,
} from '@dcloudio/uni-app'
import { ref } from 'vue'

//是否关闭反馈建议窗口
const suggest = ref<boolean>(false)

//关闭反馈建议窗口
const shutDown = (thing: string) => {
  suggest.value = false
}

//监听操作选项事件
const feedback = (thing: string) => {
  switch (thing) {
    case '点赞':
      console.log('点赞')
      break
    case '反馈':
      suggest.value = true
      break
  }
}

//查询条件
const select = ref<DynaimcPage>({
  page: 1, //查几页
  size: 8, //查几条
  orderType: 'support', //查询规则 "time" "support"
})

//数据加载状态
const loadStatus = ref<boolean>(true)

//排序规则
const sortRule = (message: string) => {
  if (message === 'support' || message === 'time') {
    select.value.orderType = message
    select.value.page = 1
    select.value.size = 8
    initializeData()
  }
}

//热门内容列表
const popularContent = ref<ResultPopularContent[]>([])

// 初始化数据
const initializeData = () => {
  reqPopularContent(select.value).then((res) => {
    //如果res.data不为空
    if (res.data && res.data.length > 0) {
      popularContent.value = []
      popularContent.value = res.data as ResultPopularContent[]
      //降序排列
      if (select.value.orderType == 'support') {
        popularContent.value.sort((a, b) => b.dSupport - a.dSupport)
      }
    }
    setTimeout(() => {
      loadStatus.value = false
    }, 200)
  })
}

//加载数据
const nextData = () => {
  reqPopularContent(select.value).then((res) => {
    //如果res.data不为空
    if (res.data && res.data.length > 0) {
      popularContent.value.push(...(res.data as ResultPopularContent[]))
      //降序排列
      if (select.value.orderType == 'support') {
        popularContent.value.sort((a, b) => b.dSupport - a.dSupport)
      }
    }
    setTimeout(() => {
      loadStatus.value = false
    }, 200)
  })
}

//排序规则选项列表数据、
const ruleList = ref<DynamicSortRule[]>([
  {
    msg: '热门',
    rule: 'support',
  },
  {
    msg: '最新',
    rule: 'time',
  },
])

// 页面周期函数--监听页面加载
onLoad(() => {
  initializeData()
})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})
onShareAppMessage((options) => {
  return {
    title: '软星工坊',
    desc: '动态趣事',
    path: '/pages/dynamic/dynamic', // 分享的目标路径，可以根据实际情况动态生成
    imageUrl: '', // 分享图片链接（仅支持网络图片）
    success: function () {
      // 分享成功的回调
      uni.showToast({
        title: '分享成功', // 提示信息文字
        icon: 'none', // 图标类型：成功、加载中或无图标
        duration: 2000, // 持续时间，单位毫秒，默认2秒后自动关闭
        mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
      })
    },
    fail: function () {
      // 分享失败的回调
      uni.showToast({
        title: '分享失败', // 提示信息文字
        icon: 'none', // 图标类型：成功、加载中或无图标
        duration: 2000, // 持续时间，单位毫秒，默认2秒后自动关闭
        mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
      })
    },
  }
})
</script>

<style scoped lang="scss">
.dynamicBox {
  position: relative;
  padding: 0 25rpx;

  .sort {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
    z-index: 10;
  }

  .pulbish {
    position: fixed;
    bottom: 5vw;
    right: 5vw;
    padding: 20rpx;
    background-color: rgb(255, 255, 255);
    z-index: 10;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
}
</style>
